import type { FC, ReactNode } from 'react'
import React, { memo } from 'react'
import { Button, FormInstance, Input, Tag } from 'antd'
import { JSONTree } from 'react-json-tree'
import usePageSearch from '@/hooks/use-page-search'
import usePageModal from '@/hooks/use-page-modal'
import { ActionDesc } from '@/global/constant'
import confirmModal from '@/utils/confirm-modal'
import { fetchPageDeleteAction } from '@/store/module/main/page-common'
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import VerifyCodeButton from '@/components/verify-code-button'
import operationLogSearch from './config/operationlist-search'
import operationListContent from './config/operationlist-content'
import operationListModalDetail from './config/operationlist-modal-detail'
import usePageContent from '@/hooks/use-page-content'

interface IProps {
  children?: ReactNode
}

const inputWithVerifyCodeStyle = {
  display: 'flex',
  alignItems: 'center'
}
const JsonTreeTheme = {
  tree: {
    backgroundColor: '#eee'
  },
  value: {
    color: 'green'
  }
}

const OperationList: FC<IProps> = (props) => {
  // 使用自定义 hooks 获取页面搜索相关的组件和函数
  const { pageContentRef, searchClick, resetClick } = usePageSearch()

  // 定义弹窗确认按钮点击事件
  const okCb = async (form: FormInstance | undefined) => {
    // 获取当前配置的信息，看一下是属于什么类型的表单描述
    const { desc } = curModalConfig.formProps
    // 获取表单数据
    const values = form?.getFieldsValue()
    if (desc === ActionDesc.SecondAuth) {
      /** 二次认证 **/
      return toSecondAuth(values)
    }
  }

  // 使用自定义 hooks 获取页面弹窗相关的组件和函数
  const { pageModalRef, onModalOk, onModalCancel, getCodeClick } = usePageModal(
    { okCb }
  )

  const {
    modal: [curModalConfig, setCurModalConfig],
    record: [currentRecord, setCurrentRecord],
    dispatch,
    toSecondAuth,
    handleSecondAuth
  } = usePageContent({ pageModalRef })

  // 定义用户操作时的回调函数
  const actionClick = (actionType: any, record?: any) => {
    setCurrentRecord(record)

    if (actionType === ActionDesc.Delete) {
      // 如果是删除操作，执行 handleSecondAuth 和 confirmModal 函数
      handleSecondAuth(() => {
        confirmModal('是否删除该日志?').then(() =>
          dispatch(fetchPageDeleteAction(record.logId))
        )
      })
    } else if (actionType === ActionDesc.OperationLogDetail) {
      // 如果是查看详情操作，打开详情弹窗
      setCurModalConfig(operationListModalDetail)
      pageModalRef.current?.openModal()
    }
  }

  // 定义自定义渲染函数，用于根据不同的数据类型渲染不同的内容
  const renderTableCpn = (
    text: string | number,
    record: any,
    customkey: string
  ) => {
    let color
    switch (customkey) {
      case 'logStatus':
        return text === 200 ? (
          <Tag color="success">成功</Tag>
        ) : (
          <Tag color="red">失败</Tag>
        )
      case 'logTime':
        return <Button type="link">{text}s</Button>
      case 'logMethod':
        color =
          text === 'GET'
            ? 'success'
            : text === 'POST'
            ? 'processing'
            : text === 'DELETE'
            ? 'error'
            : 'default'
        return <Tag color={color}>{text}</Tag>
      default:
        return <span>{text}</span>
    }
  }

  return (
    <>
      {/* 页面搜索相关的组件 */}
      <PageSearch
        config={operationLogSearch}
        searchClick={searchClick}
        resetClick={resetClick}
      />
      <PageContent
        ref={pageContentRef}
        config={operationListContent}
        actionClick={actionClick}
      >
        {renderTableCpn}
      </PageContent>
      {/* 页面弹窗相关的组件 */}
      <PageModal
        ref={pageModalRef}
        modalConfig={curModalConfig}
        onOk={onModalOk}
        onCancel={onModalCancel}
      >
        <div key="code" style={inputWithVerifyCodeStyle}>
          <Input name="code" />
          <VerifyCodeButton onClick={getCodeClick} />
        </div>
        <JSONTree
          key="detail"
          hideRoot // 隐藏根节点
          theme={JsonTreeTheme} // 设置主题颜色
          data={{
            logParams: currentRecord.logParams,
            logResult: currentRecord.logResult
          }}
        />
      </PageModal>
    </>
  )
}

export default memo(OperationList)
